<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>参考https://uiverse.io/JsGrisales/wise-ladybug-7</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    button {
      min-height: 53px;
      min-width: 166px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      position: relative;
      cursor: pointer;
      background: linear-gradient(
        90deg,
        rgba(110, 239, 255, 0.5) -12.74%,
        rgba(106, 224, 255, 0.271) 56.76%
      );
      border: 2px solid #acf7ff;
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
    }

    button:before {
      content: "";
      width: 4px;
      height: 28px;
      background: #19173b;
      border: 2px solid #acf7ff;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      position: absolute;
      border-top: 0;
      border-left: 0;
      border-bottom: 0;
      bottom: -7px;
      left: 4px;
      border-bottom-left-radius: 10px;
      border-top-left-radius: 10px;
    }

    button:after {
      content: "";
      position: absolute;
      left: -2px;
      bottom: -2px;
      border-top: 15px solid transparent;
      border-left: 15px solid #fffcf7;
    }
  </style>
  <body>
    <button>Suscribe</button>
  </body>
</html>
